<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10 flex jbetween">
      <div>
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          class="fnmb talj"
          label-width="70px"
        >
          <el-form-item label="手机号">
            <el-input
              v-model="queryParams.Phone"
              placeholder="请输入"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="名称">
            <el-input
              v-model="queryParams.Name"
              placeholder="请输入"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="班级">
            <Selector
              v-model="queryParams.ClassID"
              category="班级级联"
              cascader="级联"
            ></Selector>
          </el-form-item>
          <el-form-item label="在校情况">
            <el-select
              v-model="queryParams.SchoolState"
              placeholder="请选择"
              clearable
            >
              <el-option label="在读" value="1"></el-option>
              <el-option label="离校" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex acenter jend fnw">
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="$checkBtn(['EmploymentData:edit', 'EmploymentData:delete'])"
      @getList="getList"
      @edit="handleEdit"
      @delete="handleDelete"
      @link="handleLink"
    >
      <template v-slot:tabTop>
        <!-- <el-button
          type="primary"
          v-hasPermi="['EmploymentData:add']"
          icon="CirclePlusFilled"
          @click="handleAdd"
          >添加就业数据</el-button
        > -->
      </template>
    </MyTable>
    <MyDialog
      v-model:show="show"
      :title="title"
      :formRef="formRef"
      :width="400"
      @confirm="handleConfrim"
    >
      <el-form
        :model="formData"
        :rules="rules"
        inline
        :label-width="80"
        ref="formRef"
        class="wid100"
      >
        <!-- <el-form-item label="就业学员" prop="ID_User">
          <Selector
            v-model="formData.ID_User"
            category="用户级联"
            v-model:placeholder="formData.ID_UserName"
            cascader="级联"
          ></Selector>
        </el-form-item> -->
        <el-form-item label="入职日期" prop="StartTime">
          <MyDateTime
            v-model="formData.StartTime"
            type="date"
            format="YYYY-MM-DD"
          ></MyDateTime>
        </el-form-item>
        <el-form-item label="离职日期" prop="EndTime">
          <MyDateTime
            v-model="formData.EndTime"
            type="date"
            format="YYYY-MM-DD"
            :minTime="formData.StartTime"
            :disable="true"
          ></MyDateTime>
        </el-form-item>
        <el-form-item label="单位名称" prop="Company">
          <el-input v-model="formData.Company" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="工作岗位" prop="Post">
          <el-input v-model="formData.Post" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="工作内容" prop="JobContent">
          <el-input
            v-model="formData.JobContent"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作薪资" prop="Salary">
          <el-input v-model="formData.Salary" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </MyDialog>
    <MyDialog
      v-model:show="showDetail"
      :title="title"
      :width="1000"
      :showFooter="false"
    >
      <el-descriptions
        :column="3"
        :border="true"
        :title="proxy.$filterUserName(formData.ID_User)"
      >
        <el-descriptions-item label="入职时间">
          {{ formData.StartTime }}
        </el-descriptions-item>
        <el-descriptions-item label="离职时间">{{
          formData.EndTime
        }}</el-descriptions-item>
        <el-descriptions-item label="工作单位">{{
          formData.Company
        }}</el-descriptions-item>
        <el-descriptions-item label="岗位">{{
          formData.Post
        }}</el-descriptions-item>
        <el-descriptions-item label="工作内容">{{
          formData.JobContent
        }}</el-descriptions-item>
        <el-descriptions-item label="薪资">{{
          formData.Salary
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          formData.CreateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{
          proxy.$filterUserName(formData.CreateUser)
        }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{
          formData.UpdateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{
          proxy.$filterUserName(formData.UpdateUser)
        }}</el-descriptions-item>
      </el-descriptions>
    </MyDialog>
  </div>
</template>

<script setup name="EmploymentData">
import { ref, getCurrentInstance, onMounted } from 'vue';
import {
  GetJobDataList_Page,
  AddOrEditJobData,
  DelJobData,
  GetJobDataDetail
} from '@/api/student/jobData.js';

const { proxy } = getCurrentInstance();
const tableList = ref([]);
const Total = ref(0);
const columns = ref([
  { label: '序号' },
  { label: '账户', prop: 'Account' },
  { label: '名称', prop: 'Name', link: true },
  { label: '电话', prop: 'Phone' },
  { label: '班级', prop: 'Name_Class' },
  { label: '在校情况', prop: 'tags', tag: true },
  { label: '工作单位', prop: 'Company' },
  { label: '薪资', prop: 'Salary' },
  { label: '操作', width: 160 }
]);
proxy.$formatKey(columns.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10
});
const searchStatus = ref(true);
const queryParams = ref({
  Phone: '',
  Name: '',
  NoPage: '' //如果传"true"，则返回全部数据不分页
});
const queryRef = ref();
const showDetail = ref(false);
const show = ref(false);
const title = ref();
const formRef = ref();
const rules = ref({
  ID_User: [{ required: true, message: '请选择', trigger: 'change' }],
  StartTime: [{ required: true, message: '请选择', trigger: 'change' }],
  Company: [{ required: true, message: '请输入', trigger: 'blur' }]
});
const formData = ref({});
const SchoolState = {
  1: '在读',
  2: '离校'
};
const SchoolStateTag = {
  1: 'success',
  2: 'danger'
};
onMounted(() => {
  getList();
});

async function getList() {
  try {
    let query = {
      ...queryParams.value,
      ...page.value
    };
    let res = await GetJobDataList_Page(query);
    res.data.List?.forEach(item => {
      item.SchoolStateName = SchoolState[item.SchoolState];
      item.tags = [
        {
          type: SchoolStateTag[item.SchoolState],
          name: SchoolState[item.SchoolState]
        }
      ];
    });
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}

async function handleConfrim(val) {
  if (val) {
    try {
      let query = {
        ...formData.value,
        ID_UserName: undefined
      };
      await AddOrEditJobData(query);
      if (query.ID) {
        proxy.$modal.msgSuccess('修改成功');
      } else {
        proxy.$modal.msgSuccess('添加成功');
      }
      getList();
      show.value = false;
    } catch (error) {
      console.log(error);
    }
  }
}

async function handleLink(row) {
  try {
    let res = await GetJobDataDetail({ UserID: row.ID });
    formData.value = {
      ...res.data?.[0]
    };
    title.value = '就业详情';
    showDetail.value = true;
  } catch (error) {
    console.log(error);
  }
}

async function handleEdit(row) {
  try {
    let res = await GetJobDataDetail({ UserID: row.ID });
    title.value = '修改就业数据';
    formData.value = {
      ...res.data?.[0],
      ID_User: row.ID,
      CreateTime: undefined,
      CreateUser: undefined,
      UpdateTime: undefined,
      UpdateUser: undefined,
      ID_UserName: row.Name
    };
    show.value = true;
  } catch (error) {
    console.log(error);
  }
}
async function handleDelete(row) {
  try {
    await DelJobData({ ID: row.ID });
    getList();
    proxy.$modal.msgSuccess('删除成功');
  } catch (error) {
    console.log(error);
  }
}
function handleAdd() {
  title.value = '添加就业数据';
  formData.value = {};
  show.value = true;
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    Phone: '',
    Name: '',
    NoPage: '',
    ClassID: '',
    SchoolState: ''
  };
  handleQuery();
}
</script>

<style lang="scss" scoped></style>
